<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
        <!-- 动态组件 component, 根据下标的变化,动态的切换组件( 卸载上一个组件,挂载下一个组件 ) -->
    <!-- 动态组件 component, 特点是: is属性的值可以是具体的组件, 也可以是组件的名字 -->
    <!-- 动画组件 transition , 其中name属性可以规定动画名称的前缀 , mode设置入场动画,离场动画的播放顺序, out-in 先出后入, in-out 先入后出-->
    <!-- 缓存组件 keep-alive , 内部的组件在切换时, 不需要显示的组件会缓存起来(而不是销毁),当组件重新显示时只是从缓存中取出显示即可(不会重新实例化) -->
    <!-- 使用了缓存组件以后, 对于多个需要切换的组件, 当组件不显示的时候会被缓存,当组件第一次显示的时候会实例化并挂载, 对于需要频繁切换的组件而言可以用缓存组件,缺点就是存在内存泄漏的风险 -->
    <!-- 缓存组件 keep-alive , max属性可以指定最大缓存数 ,include指定哪些组件能被缓存 -->
    <transition name="fade" mode="out-in">
      <!-- 最多十个缓存       指定缓存-->
      <keep-alive :max="10" include="Home,Order,Mine,More">
        <component :is="cont[currentIndex]"></component>>
      </keep-alive>
    </transition>
    <div class="footer">
      <span :class="{active:currentIndex==index}" v-for="(item,index) in btns" :key="index" @click="currentIndex = index">
      {{item}}
      </span>
    </div>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import Mine from "./components/Mine.vue";
import Order from "./components/Order.vue";
import More from "./components/More.vue";
export default {
  data(){
    return{
      currentIndex:0,
      btns:["首页","订单","爆爆团","我的"],
      cont:[Home,Order,More,Mine]
    }
  }
}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
.footer{
  display: flex;
  justify-content: space-around;
  align-content: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  background-color: #ccc;
  margin-top: 10px;
}
 .active{
  color: lightskyblue;
  
}

//入场动画
.fade-enter{//动画开始时的状态
  transform: scale(0);
}
.fade-enter-active{
  transition: all 0.5s;
}
.fade-enter-to{//动画结束时的状态
  transform: scale(1);

}
</style>
